<template>
  <div class="table_css">
    <el-form
      :label-position="labelPosition"
      label-width="130px"
      :model="qualifyTable"
      ref="qualifyTable"
      class="demo-ruleForm"
    >

      <!-- 第一行 -->
      <el-row>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="单位所在地区">
              <el-input v-model="qualifyTable.area"></el-input>
            </el-form-item>
            <el-form-item label="现资格专业">
              <el-input v-model="qualifyTable.professionalQualification"></el-input>
            </el-form-item>
            <el-form-item label="聘现专业技术系列">
              <el-input v-model="qualifyTable.professionSeries"></el-input>
            </el-form-item>
            
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
              <el-form-item label="所在单位">
              <el-input v-model="qualifyTable.unit"></el-input>
            </el-form-item>
            <el-form-item label="职务任职资格" prop="postQualification">
              <el-input v-model="qualifyTable.postQualification"></el-input>
            </el-form-item>
            <el-form-item label="聘现职务资格" prop="qualification">
              <el-input v-model="qualifyTable.qualification"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="现专业技术系列" prop="technicalSeries">
              <el-input v-model="qualifyTable.technicalSeries"></el-input>
            </el-form-item>
            <el-form-item label="获取资格时间" prop="qualificationTime">
              <el-input v-model="qualifyTable.qualificationTime"></el-input>
            </el-form-item>
            <el-form-item label="聘任时间">
              <el-input v-model="qualifyTable.appointmentDate"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>


    </el-form>
     <el-button plain @click="seeFile"  class="btn_css">查看附件</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // page:1,
      // limit:5,
      staffId:7,

      labelPosition: "right",
      qualifyTable: {
        area: "",
        professionalQualification:"",
        professionSeries: "",
        unit: "",
        postQualification: "",
        qualification: "",
        technicalSeries: "",
        qualificationTime: "",
        appointmentDate:"",
      },
   
    };
  },
  methods: {
    getCon(){
      this.$axios({
        url:'/qualification/allList',
        method:'post',
        data:{
          staffId: this.staffId,
        }


      }).then(res => {
        console.log(res.data.data[0]);
        // this.qualifyTable = {...res.data.data};
        this.qualifyTable.area = res.data.data[0].staff.area;
        this.qualifyTable.professionalQualification = res.data.data[0].professionalQualification;
        this.qualifyTable.professionSeries = res.data.data[0].staff.professionSeries;
        this.qualifyTable.unit = res.data.data[0].staff.unit;
        this.qualifyTable.postQualification = res.data.data[0].postQualification;
        this.qualifyTable.qualification = res.data.data[0].staff.qualification;
        this.qualifyTable.technicalSeries = res.data.data[0].technicalSeries;
        this.qualifyTable.qualificationTime = res.data.data[0].qualificationTime;
        this.qualifyTable.appointmentDate = res.data.data[0].appointmentDate;
    
      })
    },
    seeFile(){},
  },
  mounted(){
    this.getCon();
  },
};
</script>
<style scoped lang="less">
.table_css {
    margin-right: 55px;
    // height: 790px;
    padding: 20px;
}


.computer_css {
    width: 450px;
    .el-form-item {
        margin-left: 120px;
    }
    // float: right;
}
.col_css {
  width: 310px;
}
.col_css_reszon {
    width: 710px;
}
.edu_css {
  padding-left: 15px;
}
.btn_css {
  background-color: #f5f7fA;
  border: 1px solid #eee;
  width: 150px;
  height: 40px;
  display: block;
  font-size: 14px;
  float: right;
  margin-right: 60px;
}
.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  //   padding: 10px 0;
  //   background-color: #f9fafc;
}


</style>
